<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <style>
        /* * {
            padding: 0;
            margin: 0;
        }

        ul,
        li {
            list-style: none;
        } */


        #box {
            width: 800px;
            height: 800px;
            margin: 100px auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;


        }

        .list {
            width: 500px;
            height: 200px;
            overflow: auto;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            font-size: 16px;
            padding: 0 10px;
            box-sizing: border-box;
        }

        li {
            font-size: 16px;
            width: 100%;
            height: 30px;
            text-align: center;
            line-height: 30px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #ccc;
            margin: 10px 0;

        }

        li:last-child {
            border: 0;
        }

        textarea {
            width: 500px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }

        textarea:focus {
            box-shadow: 0 0 5px rgba(81, 203, 238, 1);
            padding: 3px 0px 3px 3px;
            margin: 5px 1px 3px 0px;
            border: 1px solid rgba(81, 203, 238, 1);
        }

        .span {
            width: 100px;
            display: inline-block;
            color: #ccc;
        }


        .box1 {
            width: 500px;
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        i {
            color: red;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul class="list">

        </ul>
        <textarea name="" id=""></textarea>
        <div class="box1">
            <input type="button" value="提交" id="btn">
            <span><i>0</i> /20</span>
        </div>
    </div>
</body>
<script src="common.js"></script>
<script>
    (function () {
        //找节点
        var list = document.querySelector('.list'); //留言板
        var textarea = document.querySelector('textarea'); //输入
        var btn = document.getElementById('btn');
        var i = document.querySelector('i'); //统计字数

        var news = []; //存数据
        var da = []; //存时间

        //内容的拼接与渲染
        function text(time) {


         var da1 = newdata(time);
            console.log(da1);
            da.unshift(da1);
            var html = '';
            for (var i = 0; i < news.length; i++) {
                // html += '<li>' + (i + 1) + '.' + news[i] + '</li>';
                html +=
                    ` <li><span>${i+1}.  ${news[i]}</span><span
                            class="span1">${da[i].years}-${toDb(da[i].months)}-${toDb(da[i].days)}
                            ${toDb(da[i].hours)}:${toDb(da[i].minutes)}:${toDb(da[i].secs)}</span></li>`; //数据拼接
            }
            list.innerHTML = html; //渲染
        }
        text()
        //留言内容处理
        function incident() {
            var tex = textarea.value;
            if (tex) {
                var t = filtration(tex); //过滤
                news.unshift(t);
                // if (news.length > 5) {
                //     news.pop();
                // }
                var time = Date.now();
                text(time);
                textarea.value = '';
                textarea.focus();
            } else {
                alert('内容不能为空请重新输入');
            }
        };
        //字数限制
        textarea.oninput = function () {
            var tex = textarea.value.length;
            console.log(tex)
            if (tex <= 20) {
                i.innerHTML = tex;
            } else {
                textarea.disabled = true;
            }
        }
        //按钮
        btn.onclick = function () {
            incident()
            textarea.disabled = false;
            i.innerHTML = 0;
        }
        //键盘
        document.onkeyup = function (e) {
            if (e.keyCode == 13 && e.ctrlKey) {
                incident();
                textarea.disabled = false;
                i.innerHTML = 0;
            }
            return false;
        }
    })();
</script>

</html>